import dayjs from 'dayjs'
import { getLegendName, getLegendStyle, titleConfig } from "./tool";
import { RECOMMEND_COLOR, NORMAL_COLOR, TITLE_COLOR, NAME_COLOR, LINE_COLOR } from './costant';
import {
	legendConfigFault,
	legendConfigProbability,
} from "./config";
import {
	getCurveSeries,
	getCustomBarSeries,
	getCustomLineSeries,
	getCustomCircleSeries,
} from "./draw";
import { ref } from 'vue';

export default () => {
	const xStart = ref(0);
	const xEnd = ref(0);
	const zoomStart = ref(0);
	const zoomEnd = ref(0);
	const canvasWidth = ref(0);
	const canvasHeight = ref(0);
	const titleWidth = ref(100);
	const containerHeight = ref(120);
	const lineData = ref([]);
	const circleData = ref([]);
	const barData = ref([]);
	const lineDataOriginal = ref([]);
	const circleDataOriginal = ref([]);
	const barDataOriginal = ref([]);
	const originalStrategyData = ref([]);
	const optimizeRecommendationsData = ref([]);

	// 整理数据
	// chartNum控制显示哪些图形（不传则显示全部）；例：[0]显示图一，[0,1]显示图一和图二，以此类推
	const getFullCicleOpt = (chartNum = []) => {
		const optimizeTitleConfig = titleConfig({
			title: "优化推荐",
			titleColor: RECOMMEND_COLOR,
			times: "12.1",
			timesChange: "↓3.1",
			duration: "3.1",
			durationChange: "↓1.1",
		});
		const originalTitleConfig = titleConfig({
			title: "原有策略",
			titleColor: NORMAL_COLOR,
			times: "15.2",
			duration: "4.2",
		});
		const indexList = [{ index: 0 }, { index: 1 }, { index: 2 }];
		let xAxisIndex = [0, 1, 2];

		const defaultTitle = [
			{
				triggerEvent: true,
				text: getLegendName(optimizeTitleConfig),
				textStyle: {
					width: titleWidth.value,
					overflow: "truncate",
					rich: getLegendStyle(optimizeTitleConfig),
				},
			},
			{
				top: 190,
				triggerEvent: chartNum.length == 1,
				text: getLegendName(originalTitleConfig),
				textStyle: {
					width: chartNum.length == 1 ? titleWidth.value : null,
					overflow: "truncate",
					rich: getLegendStyle(originalTitleConfig),
				},
			},
			{
				top: 414,
				text: "概率曲线分布图",
				textStyle: {
					fontSize: 20,
					fontWeight: 700,
					color: TITLE_COLOR,
				},
			},
		];
		const legendConfigFilter = []
		if (originalStrategyData.value.length) {
			legendConfigFilter.push(...legendConfigProbability.slice(0, 2))
		}
		if (optimizeRecommendationsData.value.length) {
			legendConfigFilter.push(...legendConfigProbability.slice(2))
		}
		const defaultLegend = [
			{
				right: 0,
				selectedMode: false,
				data: ["legendName"],
				formatter: () => getLegendName(legendConfigFault),
				icon: "none",
				textStyle: {
					rich: getLegendStyle(legendConfigFault),
				},
			},
			{
				top: 414,
				right: 0,
				selectedMode: false,
				data: ["legendNameCurve"],
				formatter: () => getLegendName(legendConfigFilter),
				icon: "none",
				textStyle: {
					rich: getLegendStyle(legendConfigFilter),
				},
			},
		];
		const defaultGrid = [
			{
				left: 50,
				top: 46,
				right: 10,
				height: 120,
			},
			{
				left: 50,
				top: 234,
				right: 10,
				height: 120,
			},
			{
				left: 50,
				top: 500,
				right: 10,
				bottom: 95,
			},
		];

		if (chartNum.length === 1) {
			xAxisIndex = [0];
			indexList[chartNum[0]].index = 0;
			defaultTitle[chartNum[0]].top = 0;
			defaultGrid[chartNum[0]].height = null;
			defaultGrid[chartNum[0]].bottom = 95;
			defaultGrid[chartNum[0]].top = chartNum[0] === 2 ? 90 : 46
			defaultLegend[1].top = chartNum[0] === 2 ? 40 : 0
		} else if (chartNum.length === 2) {
			xAxisIndex = [0, 1];
			indexList[chartNum[0]].index = 0;
			indexList[chartNum[1]].index = 1;
			defaultGrid[chartNum[0]].top = 46;
			defaultLegend[1].top = chartNum[1] === 2 ? containerHeight.value + 46 + 100 : 416
			defaultTitle[chartNum[0]].top = 0;
			defaultTitle[chartNum[1]].top = chartNum[1] === 2 ? containerHeight.value + 46 + 60 : containerHeight.value + 46 + 20;
			defaultGrid[chartNum[0]].height = containerHeight.value;
			defaultGrid[chartNum[1]].height = chartNum[1] === 2 ? (containerHeight.value - 80) : containerHeight.value;
			defaultGrid[chartNum[1]].top = chartNum[1] === 2 ? (containerHeight.value + 46 + 150) : (containerHeight.value + 46 + 67);
		}
		const defaultXAxis = [
			{
				scale: true,
				type: "time",
				min: xStart.value,
				max: xEnd.value,
				gridIndex: indexList[0].index,
				axisLabel: {
					show: (chartNum.length === 1 && chartNum[0] === 0) || (chartNum.length === 2 && chartNum[1] === 2),
					color: NAME_COLOR,
					fontSize: 18,
					hideOverlap: true,
					lineHeight: 30,
					formatter: function (value) {
						//在这里写你需要的时间格式
						return dayjs(Number(value)).format("YYYY.MM.DD");
					},
				},
				axisTick: {
					show: false,
				},
				axisLine: {
					lineStyle: {
						color: NORMAL_COLOR,
						width: 2,
					},
				},
			},
			{
				scale: true,
				type: "time",
				min: xStart.value,
				max: xEnd.value,
				gridIndex: indexList[1].index,
				axisLabel: {
					color: NAME_COLOR,
					fontSize: 18,
					hideOverlap: true,
					lineHeight: 30,
					formatter: function (value) {
						//在这里写你需要的时间格式
						return dayjs(Number(value)).format("YYYY.MM.DD");
					},
				},
				axisTick: {
					show: false,
				},
				axisLine: {
					// 控制x轴线的颜色
					lineStyle: {
						color: NORMAL_COLOR,
						width: 2,
					},
				},
			},
			{
				scale: true,
				type: "time",
				min: xStart.value,
				max: xEnd.value,
				gridIndex: indexList[2].index,
				axisLabel: {
					color: NAME_COLOR,
					fontSize: 18,
					hideOverlap: true,
					lineHeight: 30,
					formatter: function (value) {
						//在这里写你需要的时间格式
						return dayjs(Number(value)).format("YYYY.MM.DD");
					},
				},
				axisTick: {
					show: false,
				},
				splitLine: {
					show: true,
				},
				axisLine: {
					lineStyle: {
						color: LINE_COLOR,
					},
				},
			},
		];
		const defaultYAxis = [
			{
				type: "value",
				gridIndex: indexList[0].index,
				axisPointer: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				splitLine: {
					show: false,
				},
				axisLabel: {
					show: false,
				},
				axisLine: {
					// 控制x轴线的颜色
					show: true,
					lineStyle: {
						color: LINE_COLOR,
					},
				},
			},
			{
				type: "value",
				gridIndex: indexList[1].index,
				axisPointer: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				axisLabel: {
					show: false,
				},
				splitLine: {
					show: false,
				},
				axisLine: {
					// 控制x轴线的颜色
					show: true,
					lineStyle: {
						color: LINE_COLOR,
					},
				},
			},
			{
				type: "value",
				name: "失效概率（%）",
				gridIndex: indexList[2].index,
				max: 100, //最大值
				min: 0, //最小值
				interval: 20, //间隔
				axisPointer: {
					show: false,
				},
				axisLine: {
					symbol: ["none", "arrow"],
					symbolSize: [6, 8],
					symbolOffset: [0, 6],
					show: true,
					lineStyle: {
						color: LINE_COLOR,
					},
				},
				nameTextStyle: {
					padding: [0, 0, 10, 34],
					fontSize: 18,
					color: NAME_COLOR,
				},
				axisLabel: {
					fontSize: 18,
					color: NAME_COLOR,
				},
			},
		];

		const defaultSeries = [
			[
				getCustomBarSeries(barData.value, indexList[0].index), //优化推荐柱形图
				getCustomLineSeries(lineData.value, indexList[0].index), //优化推荐折线图
				getCustomCircleSeries(circleData.value, indexList[0].index), //优化推荐圆圈
			],
			[
				getCustomBarSeries(barDataOriginal.value, indexList[1].index), //原有策略柱形图
				getCustomLineSeries(lineDataOriginal.value, indexList[1].index), //原有策略折线图
				getCustomCircleSeries(circleDataOriginal.value, indexList[1].index), //原有策略荐圆圈
			],
			[
				getCurveSeries(
					originalStrategyData.value,
					indexList[2].index,
					NORMAL_COLOR
				), //原有策略
				getCurveSeries(
					optimizeRecommendationsData.value,
					indexList[2].index,
					RECOMMEND_COLOR
				), //优化推荐
			],
		];
		let title = [];
		let legend = [];
		let grid = [];
		let xAxis = [];
		let yAxis = [];
		let series = [];
		chartNum.forEach((i) => {
			title.push(defaultTitle[i]);
			legend.push(defaultLegend[i === 2 ? 1 : 0]);
			grid.push(defaultGrid[i]);
			xAxis.push(defaultXAxis[i]);
			yAxis.push(defaultYAxis[i]);
			series.push(...defaultSeries[i]);
		});
		if (chartNum.length === 0 || chartNum.length > 2) {
			title = defaultTitle;
			legend = defaultLegend;
			grid = defaultGrid;
			xAxis = defaultXAxis;
			yAxis = defaultYAxis;
			defaultSeries.forEach((item) => {
				series.push(...item);
			});
		}
		return {
			title,
			legend,
			grid,
			xAxis,
			yAxis,
			series,
			tooltip: {
				show: true,
			},
			dataZoom: [
				{
					xAxisIndex,
					type: "slider",
					filterMode: "none",
					bottom: 10,
					labelFormatter: function (value) {
						return dayjs(Number(value)).format("YYYY.MM.DD");
					},
					lable: {
						position: "end",
					},
					backgroundColor: "rgba(255, 255, 255, 0.3)",
					borderColor: "rgba(255, 255, 255, 0.3)",
					textStyle: {
						fontSize: 18,
					},
					startValue: zoomStart.value,
					endValue: zoomEnd.value,
				},
				{
					startValue: zoomStart.value,
					endValue: zoomEnd.value,
					type: 'inside',
					xAxisIndex
				}
			],
			axisPointer: {
				show: true,
				join: 'miter',
				label: {
					show: false,
				},
				lineStyle: {
					color: "#2E3742",
				},
				link: [
					{
						xAxisIndex,
					},
				],
			},
		};
	};
	return {
		xStart,
		xEnd,
		canvasHeight,
		titleWidth,
		containerHeight,
		canvasWidth,
		lineData,
		circleData,
		barData,
		lineDataOriginal,
		circleDataOriginal,
		barDataOriginal,
		originalStrategyData,
		optimizeRecommendationsData,
		zoomStart,
		zoomEnd,
		getFullCicleOpt
	}
}